<template>
	<div>
		<div
			class="main"
			ref="target"
			style="width: 600px; height: 400px"
		></div>
	</div>
</template>

<script setup>
import echarts from 'echarts';
import { ref, onMounted } from 'vue';
const target = ref(null);
let myChart;
onMounted(() => {
	myChart = echarts.init(target.value, 'light');
	renderChart();
});

const renderChart = () => {
	const data = {
		categories: [
			'测试',
			'新像素',
			'永桥小学',
			'新世界羽毛球训练营',
			'68354',
			'1304',
			'高中',
			'小学舞蹈',
			'文化学习',
			'无',
			'糖糖',
			'多多教育',

		],
		values: [1, 1, 1, 2, 2, 2, 5, 10, 15, 15, 15, 30]
	};

	const options = {
		color:'#A7EE9C',
		xAxis: {
			type: 'value'
		},
		yAxis: {
			type: 'category',
			data: data.categories
		},
		series: [
			{
				type: 'bar',
				data: data.values
			}
		]
	};
	myChart.setOption(options);
};
</script>